<template>
  <div class="view-container">
    <el-tabs type="border-card">
      <el-tab-pane label="发送私信">
        <!-- 发送 -->
        <el-container class="fasong">
          <el-header>
            <el-row class="elA">
              <el-col :span="2">发给：</el-col>
              <el-col :span="22">
                <el-select v-model="user.receiverList" multiple placeholder="请选择人员">
                  <el-option
                    v-for="itema in RYdata"
                    :key="itema.value"
                    :label="itema.label"
                    :value="itema.value"
                  ></el-option>
                </el-select>

              </el-col>
            </el-row>
            <el-row class="elA">
              <el-col :span="2">标题：</el-col>
              <el-col :span="22">
                <el-input v-model="user.mailTitle"></el-input>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
            <Tinymce v-model="user.mailContent" />
          </el-main>
          <el-footer>
            <span>

            </span>
            <el-button type="primary" @click="tanChu">发送</el-button>
          </el-footer>
        </el-container>
      </el-tab-pane>

      <el-tab-pane @click="qe()" label="收到的消息">
        <Shoudaoxiaoxi ref="Shoudaoxiaoxi"></Shoudaoxiaoxi>
      </el-tab-pane>

      <el-tab-pane @click="q()" label="发出的消息">
        <Fachuxiaoxi ref="Fachuxiaoxi"></Fachuxiaoxi>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import Exs from "@/components/Tinymce/index";xinxi
import Tinymce from "@/components/Tinymce";
import Fachuxiaoxi from "@/components/Xiaoxixitong/Fachuxiaoxi";
import Shoudaoxiaoxi from "@/components/Xiaoxixitong/Shoudaoxiaoxi";
import danganRY from "@/api/dangan/renyuanselect/danganRY";
import xinxiGli from "@/api/xiaoxi/xiaoxi";
export default {
  components: {
    Tinymce,
    Shoudaoxiaoxi,
    Fachuxiaoxi
  },

  name: "",
  data() {
    return {
      RYdata: [], //人员组
      //发送  数据对象
      user: {
        receiverList: [],
        mailTitle: "",
        mailContent: ""
      },
      // datas:[],

      FaChuAll: {} //发出的数据对象
    };
  },
  //生命周期
  created() {
    this.RYdataa(); //人员select查询方法
  },
  methods: {
    //  发出查询
    q() {
      this.$refs["Fachuxiaoxi"].SelectFasongFen();
    },

        //时间格式
    updateTimeFmt(row) {
      return new Date(row.updateTime).toLocaleString();
    },

    //收到查询
    qe() {
      this.$refs["Shoudaoxiaoxi"].SelectShoudao();
    },
    handleCurrentChange() {},

    //人员select
    RYdataa() {
      danganRY.getRenYuan().then(res => {
        this.RYdata = res.result;
      });
    },

    //发送消息
    tanChu() {
      xinxiGli.add(this.user).then(res => {
        console.log(this.user);
        this.$message.success("发送成功");
        this.q();
        this.qe();
      });

    }
  }
};
</script>

<style scoped lang="scss">
//弹出框头部
.toubu {
  background-color: chocolate;
}
.shux {
  display: inline-block;
  border: 1px solid #000;
  width: 49%;
  height: 350px;
}

.shuxB {
  display: inline-block;
  border: 1px solid #000;
  width: 49%;
  height: 350px;
  margin-left: 10px;
}
.maints {
  display: flex;
}

// 发送消息头部
.fasong {
  border: 1px solid rgb(201, 201, 201);
  margin: 5px;
}
.fasong .el-header {
  margin-bottom: 70px;
  height: 100px;
}
.el-icon-close {
  color: red;
  font-size: 20px;
}
.elA .el-col:nth-child(1) {
  text-align: right;
  font-size: 12px;
  margin-top: 5px;
}
.elA {
  margin-top: 20px;
}

.elA .el-select {
  width: 500px;
}
.elA:nth-child(2) .el-col:nth-child(1) {
  margin-top: 10px;
}
.soso {
  border: 1px solid rgb(216, 216, 216);
  display: inline-block;
  width: 200px;
  height: 20px;
  border-radius: 5px;
}
// 发送消息底部
.view-container>.el-tabs{
  height: 100%;
}
.view-container {
  border-radius: 5px;
  box-shadow: inset 0 0 0px 1px #fff;

  border: 1px solid rgba(143, 143, 143, 0.479);

  padding: 0;
  margin: 10px;
  height: 100%;
}

.group {
  background-color: rgba(122, 121, 121, 0.164);

  width: 100%;
  padding: 0;
  margin: 0;
}
</style>
